<template>
  <div class="container">
    <section class="banner fhs">
      <div class="b-left animate__fadeInDown animate__animated">
        <img src="LOGO.png" alt="" class="b-logo" />
        <h2>互联网协会</h2>
        <p>欢迎加入本社团并了解更多信息~</p>
        <p>这是一个历史悠久的社团</p>
        <p>不知道写什么了，所以这是一个占位符</p>

        <div class="b-btn">关于本站</div>
      </div>
      <div class="b-right animate__fadeInRight animate__animated">
        <img src="banner.png" alt="" class="b-banner" />
      </div>
    </section>

    <section class="cards">
      <div class="card animate__fadeInUp animate__animated">
        <img src="folder.png" alt="" />
        <h2>{{ cardData.card1 }}</h2>
      </div>
      <div class="card animate__fadeInUp animate__animated">
        <img src="file.png" alt="" />
        <h2>{{ cardData.card2 }}</h2>
      </div>
      <div class="card animate__fadeInUp animate__animated">
        <img src="web.png" alt="" />
        <h2>{{ cardData.card3 }}</h2>
      </div>
    </section>

    <section class="detail"></section>
  </div>
</template>

<script setup lang="ts">
import "animate.css";
import { ref, reactive } from "vue";

const cardData = reactive({
  card1: "绘画展示",
  card2: "写作展示",
  card3: "web展示",
});
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}

.banner {
  width: 100%;
  margin: 0;
  padding: 0;

  height: 550px;
}

/* banner左边栏内容 */
.b-left {
  margin: 40px 0 40px 80px;
  height: 500px;
  width: 30%;

  float: left;
}
.b-left > h2 {
  margin: 50px 0 30px 0;
}
.b-left > p {
  margin-bottom: 2px;
  color: gray;
}

.b-btn {
  margin: 40px 0 10px 0;
  width: 150px;
  height: 40px;
  background-color: dodgerblue;
  border-radius: 4px;

  text-align: center;
  line-height: 40px;
  color: white;
  font-weight: bold;

  cursor: pointer;

  transition: all ease 0.2s;
}
.b-btn:hover {
  background-color: lightskyblue;
}
.b-logo {
  margin-top: 50px;
  margin-bottom: 10px;
  width: 320px;
  height: 80px;
}

/* banner右边栏内容 */
.b-right {
  margin: 40px 40px 0 0;
  width: 60%;
  height: 500px;

  float: right;

  display: flex;
  justify-content: center;
  align-items: center;
}
.b-banner {
  margin: 40px 0 40px 40px;
  width: 75%;
  height: 75%;
}

/* cards板块 */
.cards {
  width: 100%;
  height: 300px;

  display: flex;
  justify-content: space-evenly;
  align-items: center;

  border-radius: 10px;
  background-color: ghostwhite;
}
.card {
  width: 30%;
  height: 200px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border-radius: 4px;

  transition: all ease 0.2s;
  cursor: pointer;
}
.card > img {
  margin: 10px 0;
  width: 100px;
  height: 80px;
}
.cards .card:nth-child(1):hover {
  background-color: lightyellow;
}
.cards .card:nth-child(2):hover {
  background-color: lightgray;
}
.cards .card:nth-child(3):hover {
  background-color: lightskyblue;
}
</style>
